<template>
  <div class="hot-collect-wrapper" v-loading = "loading">
    <!-- 头部 -->
    <Header></Header>
    <!-- 搜索 -->
    <Search @sendKeywords = "getKeywords"></Search>
    <!-- 分类导航 -->
    <Categories :categoryList="categoryList"  @sendCategory="getCategory"></Categories>
    <!-- 图文列表 -->
    <div class="graphic-wrapper">
      <div class="hot-graphic-lists" v-if = "lists.length">
        <HotSystemList  v-for="(item,index) in lists" :key="item.id" :item="item" :index="index" @sendJoinCollect="getJoinCollect"></HotSystemList>
      </div>
      <div class="graphic-no-data" v-else>
        <NoData gradient="yellow" :msg = "msg"></NoData>
      </div>
      <!-- 分页组件 -->
      <div class="pagination" v-if="total > 40">
        <el-pagination  
          background
          :current-page = "pageNum"
          @current-change="changeCurrentPage"
          :page-sizes="[40,80]"
          @size-change="changeCurrentPageSize"
          :total = "total"
          layout="total, sizes, prev, pager, next, jumper"
        >
        </el-pagination>
        <div class="pageSearch" @click="pageSearch">确定</div>
      </div>
    </div>
  </div>
</template>

<script>
  import Header from "../components/HotCollect/Header";
  import Search from "../components/HotCollect/Search";
  import Categories from "../components/HotCollect/Categories";
  import HotSystemList from '../components/hotSystem/HotSystemList'
  import NoData from '../components/noData'
  // import {hotCollect} from '../service/api';
  export default {
    async fetch({store}){
      await store.commit('setInterIndex',10)
    },
    layout: 'internalouts',
    components:{
      Header,
      Search,
      Categories,
      HotSystemList,
      NoData
    },
    data() {
      return {
        // 分类导航数据
        categoryList :[],
         //图文列表
        lists:[],
        // 第一页
        pageNum:1, 
        // 每页的条数
        pageSize:40, 
        // 总条数
        total:0,
        // 页面加载效果 
        loading:false, 
        // 用户id
        userId:null,
        // 文本搜索
        keywords:String,
        // 分类标签
        category:String,
        // 暂无收藏的展示
        msg:"暂无收藏哟,快去收藏页收藏吧!"
      }
    },
    created() {
    },
    mounted() {
      this.isLogin();
      // 初始化收藏数据
      this.hotCollect();
    },
    methods: {
      // 关键字
      getKeywords(e) {
        console.log('getKeywords',e)
        this.keywords = e;
        this.hotCollect();
      },
      // 分类导航事件
      getCategory(e) {
        // 分类字段
        this.category = e;
        console.log(this.category = e)
        this.hotCollect()
      },
      // 点击是否收藏
      getJoinCollect() {
        this.hotCollect();
      },
      // 改变当前页数
      changeCurrentPage(page){
        this.pageNum = page;
        this.hotCollect(); //调用商品列表接口
        this.$scrollTo()
      },
      // 改变条数
      changeCurrentPageSize(pageSize){
        this.pageNum = 1; //重新请求第一页
        this.pageSize = pageSize;  //设置条数
        this.hotCollect(); //调用商品列表接口
        this.$scrollTo()
      },
      // 点击确定按钮时候调用分页事件
      pageSearch() {
        this.hotCollect();
        this.$scrollTo();
      },
      // 用户点赞
      hotCollect() {
        this.loading = true;
        let params ={
          //页数
          pageNum:this.pageNum, 
          //每页的条数
          pageSize:this.pageSize,
          //用户id
          id:this.userId,
          // 分类标签
          category:this.category,
          // 关键字
          keyword:this.keywords,
        }
        this.$axios.post("hotCollect",params).then(res => {
          this.loading = false;
          if(res.status === 200){
            // 商品列表 
            // 添加一个isFlag
            res.data.obj.crawGoods.forEach(item=>{
              let obj = item;
              this.$set(obj,"isFlag",false)
            })
            this.lists = res.data.obj.crawGoods;
            console.log('res',res.data)
            this.total = res.data.obj.total;
            // 分类
            res.data.obj.category.unshift("全部");
            this.categoryList = res.data.obj.category;
            console.log('categoryList',this.categoryList)
          }else{
            this.$message.warning(res.msg);
          }
        })
        .catch(error => {
          // this.$message.warning('请求失败');
          this.loading = false;
        })
      },
      // 判断是否登录
      isLogin() {
        this.userId = localStorage.getItem('userid') || null;
        console.log('userId',this.userId)
        if(!this.userId){
          this.$router.replace('/login')
        }
      }
    },
    computed: {
    },
    watch:{
    },
    beforeDestory() {
    }
  }
</script>

<style scoped>
  .hot-collect-wrapper{
    background-color: #151923;
    min-width: 1200px;
    min-height: 100vh;
    margin-top: 2px;
  }
    /* 图文列表 */
  .graphic-wrapper{
    width: 1440px;
    margin: 0 auto;
    overflow:hidden;
  }
  @media screen and (max-width:1440px){
    .graphic-wrapper{
      width: 1200px;
    }
  }
  .hot-graphic-lists{
    display:flex;
    flex-wrap:wrap;
    width:1470px;
    padding-bottom:30px;
  }
  @media screen and (max-width:1440px){
    .hot-graphic-lists{
      width:1230px;
    }
  }
  /* 分页样式 */
  .pagination{
    display:flex;
    align-items:center;
    justify-content:flex-end;
    padding:0 0 50px 0;
    margin-top:20px;
  }
  .pagination .pageSearch{
    width:60px;
    height:28px;
    line-height:28px;
    text-align:center;
    border-radius:15px;
    background-image:linear-gradient(to right, #0099ff,#0099ff,#05d5fc,#07edfb);
    color:#ffffff;
    font-size:14px;
    cursor:pointer;
    margin-left:10px;
    user-select:none;
    transition:all .2s ease;
  }
  .pagination .pageSearch:hover{
    background-image:linear-gradient(to left, #0099ff,#0099ff,#05d5fc,#07edfb);
  }
  /deep/ .el-pagination.is-background .el-pager li:not(.disabled).active{
    background-color: none;
    background-image:linear-gradient(to right, #0099ff,#0099ff,#05d5fc,#07edfb);
  }
  /deep/ .el-pagination.is-background .el-pager li:not(.disabled).active:hover{
    background-image:linear-gradient(to left, #0099ff,#0099ff,#05d5fc,#07edfb);
  }
  /* 暂无数据 */
  .graphic-no-data{
    width:1440px;
  }
  @media screen and (max-width:1440px){
    .graphic-no-data{
      width:1200px;
    }
  }
</style>
